<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" href="./css/mui.min.css">
		<style type="text/css">
			* {
				margin: 0px;
				padding: 0px;
			}
			 
			body,
			#pullrefresh {
				background-color: #f9f1f2;
			}
			
			#classify-icon {
				width: 55px;
				height: 55px;
				padding: 0 0;
				margin-bottom: 20px;
				margin-left: auto;
				margin-right: auto;
				border-radius: 50%;
				border: none;
				z-index: 999;
				overflow: hidden;
				background-repeat: no-repeat;
				background-size: 100% 100%;
			}
			
			#classify-icon {
				background-image: url('img/colligate.png');
			}
			
			.mui-bar-tab {
				display: block;
				box-shadow: none;
				transition: all 0.5s;
			}
			
			.mui-backdrop {
				background: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .5));
				/* Safari 5.1 - 6.0 */
				background: -o-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .5));
				/* Opera 11.1 - 12.0 */
				background: -moz-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .5));
				/* Firefox 3.6 - 15 */
				background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .5));
				/* 标准的语法 */
			}
			
			.animated {
				-webkit-animation-duration: 0.5s;
				animation-duration: 0.5s;
				-webkit-animation-fill-mode: both;
				animation-fill-mode: both;
			}
			
			@-webkit-keyframes bounceInDown {
				0%,
				60%,
				75%,
				90%,
				100% {
					-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
					transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
				}
				0% {
					opacity: 0;
					-webkit-transform: translate3d(0, 100%, 0);
					transform: translate3d(0, 100%, 0);
				}
				60% {
					opacity: 1;
					-webkit-transform: translate3d(0, 25px, 0);
					transform: translate3d(0, 25px, 0);
				}
				75% {
					-webkit-transform: translate3d(0, -10px, 0);
					transform: translate3d(0, -10px, 0);
				}
				90% {
					-webkit-transform: translate3d(0, 5px, 0);
					transform: translate3d(0, 5px, 0);
				}
				100% {
					-webkit-transform: none;
					transform: none;
				}
			}
			
			@keyframes bounceInDown {
				0%,
				60%,
				75%,
				90%,
				100% {
					-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
					transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
				}
				0% {
					opacity: 0;
					-webkit-transform: translate3d(0, 100%, 0);
					transform: translate3d(0, 100%, 0);
				}
				60% {
					opacity: 1;
					-webkit-transform: translate3d(0, 25px, 0);
					transform: translate3d(0, 25px, 0);
				}
				75% {
					-webkit-transform: translate3d(0, -10px, 0);
					transform: translate3d(0, -10px, 0);
				}
				90% {
					-webkit-transform: translate3d(0, 5px, 0);
					transform: translate3d(0, 5px, 0);
				}
				100% {
					-webkit-transform: none;
					transform: none;
				}
			}
			
			.bounce-in-down {
				-webkit-animation-name: bounceInDown;
				animation-name: bounceInDown;
			}
			
			@-webkit-keyframes fadeInDown {
				0%,
				60%,
				75%,
				90%,
				100% {
					-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
					transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
				}
				0% {
					opacity: 0;
					-webkit-transform: translate3d(0, 100%, 0);
					transform: translate3d(0, 100%, 0);
				}
				60% {
					opacity: 1;
					-webkit-transform: translate3d(0, 0px, 0);
					transform: translate3d(0, 0px, 0);
				}
				75% {
					-webkit-transform: translate3d(0, 0px, 0);
					transform: translate3d(0, 0px, 0);
				}
				90% {
					-webkit-transform: translate3d(0, 0px, 0);
					transform: translate3d(0, 0px, 0);
				}
				100% {
					-webkit-transform: none;
					transform: none;
				}
			}
			
			@keyframes fadeInDown {
				0%,
				60%,
				75%,
				90%,
				100% {
					-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
					transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
				}
				0% {
					opacity: 0;
					-webkit-transform: translate3d(0, 100%, 0);
					transform: translate3d(0, 100%, 0);
				}
				60% {
					opacity: 1;
					-webkit-transform: translate3d(0, 0px, 0);
					transform: translate3d(0, 0px, 0);
				}
				75% {
					-webkit-transform: translate3d(0, 0px, 0);
					transform: translate3d(0, 0px, 0);
				}
				90% {
					-webkit-transform: translate3d(0, 0px, 0);
					transform: translate3d(0, 0px, 0);
				}
				100% {
					-webkit-transform: none;
					transform: none;
				}
			}
			
			.fade-in-down {
				-webkit-animation-name: fadeInDown;
				animation-name: fadeInDown;
			}
			
			@-webkit-keyframes bounceOutUp {
				20% {
					-webkit-transform: translate3d(0, -10px, 0);
					transform: translate3d(0, -10px, 0);
				}
				40%,
				45% {
					opacity: 1;
					-webkit-transform: translate3d(0, 20px, 0);
					transform: translate3d(0, 20px, 0);
				}
				100% {
					opacity: 0;
					-webkit-transform: translate3d(0, 100%, 0);
					transform: translate3d(0, 100%, 0);
				}
			}
			
			@keyframes bounceOutUp {
				20% {
					-webkit-transform: translate3d(0, -10px, 0);
					transform: translate3d(0, -10px, 0);
				}
				40%,
				45% {
					opacity: 1;
					-webkit-transform: translate3d(0, 20px, 0);
					transform: translate3d(0, 20px, 0);
				}
				100% {
					opacity: 0;
					-webkit-transform: translate3d(0, 100%, 0);
					transform: translate3d(0, 100%, 0);
				}
			}
			
			.bounce-out-up {
				-webkit-animation-name: bounceOutUp;
				animation-name: bounceOutUp;
			}
			
			@-webkit-keyframes fadeOutUp {
				20% {
					-webkit-transform: translate3d(0, 0px, 0);
					transform: translate3d(0, 0px, 0);
				}
				40%,
				45% {
					opacity: 1;
					-webkit-transform: translate3d(0, 0px, 0);
					transform: translate3d(0, 0px, 0);
				}
				100% {
					opacity: 0;
					-webkit-transform: translate3d(0, 100%, 0);
					transform: translate3d(0, 100%, 0);
				}
			}
			
			@keyframes fadeOutUp {
				20% {
					-webkit-transform: translate3d(0, 0px, 0);
					transform: translate3d(0, 0px, 0);
				}
				40%,
				45% {
					opacity: 1;
					-webkit-transform: translate3d(0, 0px, 0);
					transform: translate3d(0, 0px, 0);
				}
				100% {
					opacity: 0;
					-webkit-transform: translate3d(0, 100%, 0);
					transform: translate3d(0, 100%, 0);
				}
			}
			
			.fade-out-up {
				-webkit-animation-name: fadeOutUp;
				animation-name: fadeOutUp;
			}
			
			.menu-backdrop {
				display: none;
			}
			
			.menu-wrapper {
				position: fixed;
				bottom: 0;
				left: 0;
				right: 0;
				z-index: 999;
				text-align: center;
				background-color: #F3F3F3;
				width: 100%;
			}
			
			.menu-wrapper.hidden {
				-webkit-transform: translate3d(0, 100%, 0);
				transform: translate3d(0, 100%, 0);
				z-index: -1;
			}
			
			.menu {
				width: 100%;
			}
			
			.menu .mui-table-view-inverted {
				color: gray;
				font-size: 19px;
			}
			
			.menu .mui-table-view-inverted .mui-table-view-cell:after {
				height: 2px;
				left: 0;
				right: 0;
			}
			
			.menu-wrapper.mui-active,
			.menu-wrapper.mui-active .menu {
				-webkit-transform: translate3d(0, 0, 0);
				transform: translate3d(0, 0, 0);
			}
			
			.card img {
				width: 90%;
				height: 100px;
				margin-top: 5px;
				border-radius: 5%;
			}
			
			.card-con {
				background-color: white;
				/*border: 1px solid black;*/
				border-radius: 5%;
				margin: 5px auto;
				font-size: 0.8em;
			}
			
			.shadow {
				box-shadow: 0px 5px 5px rgba(0, 0, 0, .5);
			}
			
			.container {
				/*border-top: 1px solid grey;*/
			}
			
			.container>.item {
				/*height: 200px;*/
				margin-bottom: 10px;
				background-color: white;
				padding: 5px 0px;
			}
			
			.item>.user-info,
			.item>.activity-title,
			.item>.activity-img,
			.item>.activity-content,
			.item>.activity-info {
				padding: 5px 10px;
			}
			
			.item>.user-info>img {
				width: 30px;
				height: 30px;
				border-radius: 50%;
				line-height: 30px;
				float: left;
			}
			
			.item>.user-info>span {
				line-height: 30px;
				float: left;
				margin-left: 10px;
				color: grey;
			}
			.item>.user-info>span:nth-of-type(2){
				float: right;
				color: #EB7A77;
				font-size: 14px;
			}
			.item>.activity-title {}
			
			.item>.activity-title>h4 {
				font-size: 18px;
				color: black;
				margin: 0px;
			}
			
			.item>.activity-img {
				padding: 5px 0px;
				width: 100%;
				height: 150px;
			}
			
			.item>.activity-img>img {
				width: 100%;
				height: 100%;
			}
			
			.item>.activity-content {}
			
			.item>.activity-content>p {
				color: black;
				font-size: 14px;
				margin-bottom: 0px;
			}
			
			.item>.activity-info {
				font-size: 14px;
			}
			
			.item>.activity-info>span {
				margin-right: 10px;
				float: left;
			}
			
			.item>.activity-info>.join {
				float: right;
			}
			
			.item>.activity-info>.join>.num {
				color: #EB7A77;
			}
			
			/*下拉刷新文字的样式*/

            .mui-pull-caption {
                background-size: contain;
                background-repeat: no-repeat;
                background-position: center;
                width: 0px;
                height: 31px;
                font-size: 0px;
                display: none;
            }
            /*下拉刷新圆形进度条的大小和样式*/

            .mui-spinner {
                width: 32px;
                height: 32px;
            }
            .mui-spinner:after {
                background-image: url(./img/shuaxin.png);
                background-size: 100% 100%;
            }
            /*下拉刷新的箭头颜色*/
            .mui-icon-pulldown {
                color: #eb7a77;
            }
            
            
            
            .mui-ellipsis-3 {
    display: -webkit-box;
    overflow: hidden;
    white-space: normal!important;
    text-overflow: ellipsis;
    word-wrap: break-word;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}


		</style>
	</head>

	<body>

		<!--下拉刷新容器-->

		<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
			<div class="mui-scroll">
				<div id="data">
					<div class="container">
						<div class="item" v-for="i in item" v-if="item.length" :id="i.id" >
							<div class="user-info mui-clearfix">
								<img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=8232468,2916696848&fm=27&gp=0.jpg" v-bind:src="i.avatar" alt="" />
								<span v-text="i.username"></span>
								<span v-if="i.activityType == 1">#娱乐</span>
								<span v-if="i.activityType == 2">#美食</span>
								<span v-if="i.activityType == 3">#出行</span>
								<span v-if="i.activityType == 4">#购物</span>
								<span v-if="i.activityType == 5">#游戏</span>
							</div>
							<div class="activity-title">
								<h4 v-text="i.activityName"></h4>
							</div>
							<div v-if="!(i.img)"  class="activity-img">
								<img src="img/chuxing.jpeg" alt="" />
							</div>
							<div v-if="i.img"  class="activity-img">
								<img v-bind:src="i.img" alt="" />
							</div>
							<div class="activity-content">
								<p class="mui-ellipsis-3" v-text="i.activityContent"></p>
							</div>
							<div class="activity-info mui-clearfix">
								<span class="time" v-text="i.activityDate">1-20</span>
								<span class="limit" v-if="i.activityLimit==0">不限</span>
								<span class="limit" v-if="i.activityLimit==1">只限男生</span>
								<span class="limit" v-if="i.activityLimit==2">只限女生</span>
								<span class="join">剩余名额 : <span class="num" v-text="i.activityNum-i.num"></span></span>
							</div>
						</div>
						
					</div>
				</div>

			</div>
		</div>

		<nav id="classify-icon" class="mui-bar mui-bar-tab">
		</nav>
		<div id="menu-wrapper" class="menu-wrapper hidden">
			<div id="menu" class="menu">
				<div class="mui-row">
					<div class="card mui-col-sm-4 mui-col-xs-4">
						<div data-id='0' class="card-con mui-col-sm-11 mui-col-xs-11">
							<img src="img/zonghe.jpg" alt="" />
							<span>综合</span>
						</div>
					</div>
					<div class="card mui-col-sm-4 mui-col-xs-4">
						<div data-id='1' class="card-con mui-col-sm-11 mui-col-xs-11">
							<img src="img/yvle.jpg" alt="" />
							<span>娱乐</span>
						</div>

					</div>
					<div class="card mui-col-sm-4 mui-col-xs-4">
						<div data-id='2' class="card-con mui-col-sm-11 mui-col-xs-11">
							<img src="img/chuxing.jpeg" alt="" />
							<span>美食</span>
						</div>

					</div>
					<div class="card mui-col-sm-4 mui-col-xs-4">
						<div data-id='3' class="card-con mui-col-sm-11 mui-col-xs-11">
							<img src="img/gouwu.jpg" alt="" />
							<span>出行</span>
						</div>

					</div>
					<div class="card mui-col-sm-4 mui-col-xs-4">
						<div data-id='4' class="card-con mui-col-sm-11 mui-col-xs-11">
							<img src="img/meishi.jpg" alt="" />
							<span>购物</span>
						</div>

					</div>
					<div class="card mui-col-sm-4 mui-col-xs-4">
						<div data-id='5' class="card-con mui-col-sm-11 mui-col-xs-11">
							<img src="img/youxi.jpg" alt="" />
							<span>游戏</span>
						</div>

					</div>
				</div>

			</div>
		</div>
		<script src="./js/mui.min.js"></script>
		<script src="./vue/vue.min.js" type="text/javascript"></script>
		<script src="./js/ip.js" type="text/javascript"></script> 
		<script>
			

			
			mui.plusReady(function() {
			mui.init({
				swipeBack: true, //启用右滑关闭功能
				gestureConfig: {
					tap: true, //默认为true
					doubletap: true, //默认为false
					longtap: true, //默认为false
					swipe: true, //默认为true
					drag: true, //默认为true
					hold: true, //默认为false，不监听
					release: true //默认为false，不监听
				},
				pullRefresh: {
					container: '#pullrefresh',
					down: {
						callback: pulldownRefresh
					},
					up: {
						contentrefresh: '正在加载...',
						callback: pullupRefresh
					}
				}
			});	
			
			
			var count=0,item = [],type=0;
			var one = new Vue({
				el: '#data',
				data: {
					item:[]
				}
			});
				
//			mui('#pullrefresh').pullRefresh().setStopped(true); //暂时禁止滚动
//			mui('#pullrefresh').pullRefresh().setStopped(false); //取消暂时禁止滚动
//			
//			mui('#pullrefresh').pullRefresh().disablePullupToRefresh();//禁用上拉加载
//			mui('#pullrefresh').pullRefresh().enablePullupToRefresh();//启用上拉加载
				/**
			 * 下拉刷新具体业务实现
			 */
			function pulldownRefresh() {
				setTimeout(function() {
					mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
					one.item = [];
					count = 0;
					ajax(0,type)
				}, 1500);
			}
			/**
			 * 上拉加载具体业务实现
			 */
			function pullupRefresh() {
				setTimeout(function(){
					mui('#pullrefresh').pullRefresh().endPullupToRefresh(false); //参数为true代表没有更多数据了。
					ajax(count,type)
				},500)
			}

				function ajax(num,type){
					mui.ajax('http://'+ip+'/xiaojv/Api/index.php?p=front&m=index&a=index', {
						dataType: 'json', //服务器返回json格式数据
						type: 'get', //HTTP请求类型
						timeout: 10000, //超时时间设置为10秒；
						data:{
							'num':num,
							'type':type
						},
						success: function(data) {
							var length = data.length;
							if(length == 0){
								mui.toast('没有更多活动了')
							}
							count += length;
							for(var i=0;i<length;i++){
							　　one.item.push(data[i]);
							}
						},
						error: function(xhr, type, errorThrown) {
							console.log(type);
						}
					});
				}
				ajax(0,type)
				mui('#data').on('tap', '.item', function(event) {
					var activityid = this.id;
					mui.openWindow({
						url: 'template/activitydetails.html',
						id: 'activitydetails',
						extras:{
							'activityid':activityid
						}
					})
				});
				var menuWrapper = document.getElementById("menu-wrapper");
				var menu = document.getElementById("menu");
				var menuWrapperClassList = menuWrapper.classList;

				var info = document.getElementById("info");
				var classify = document.getElementById("classify-icon");
				var mask = mui.createMask(takeBack); //为用户点击蒙版时自动执行的回调；
				classify.addEventListener('tap', eject);
				//下沉菜单中的点击事件
				mui('#menu').on('tap', '.card-con', function() {
					takeBack();
					mask.close()
					type = this.dataset.id;
					one.item = [];
					count = 0;
					ajax(0,type)
				});
				mui('#menu').on('hold', '.card-con', function(event) {
					this.classList.add('shadow')
				});
				mui('#menu').on('release', '.card-con', function(event) {
					this.classList.remove('shadow')
				});

				function eject() {
					mask.show()
					menuWrapper.className = 'menu-wrapper fade-in-down animated mui-active';
					menu.className = 'menu bounce-in-down animated';

				}

				function takeBack() {
					menuWrapper.className = 'menu-wrapper fade-out-up animated';
					menu.className = 'menu bounce-out-up animated';
					setTimeout(function() {
						menuWrapper.classList.add('hidden');
					}, 500);
				}

				window.addEventListener("swipeleft", function(event) {
					var angle = event.detail.angle;
					angle = Math.abs(angle);
					if(angle > 170 && angle < 185) {
						mui.openWindow({
							url: 'template/upload.html',
							id: 'upload',
						})
					}
				});
			});

		</script>
	</body>

</html>